<template>
  <div>
    <newHeader/>
    <div class="m-content wrapbox">
      <div class="m-sent">
        <div class="hd">
          <h2>发布</h2>
        </div>

        <div class="bd">
          <h2 class="sider-title">标题</h2>
          <div class="int">
            <input v-model="title" type="text" name="" id="" value="" placeholder="请输入标题"/>
          </div>
          <h2 class="sider-title">正文</h2>
          <div class="tarea">
            <script id="deitor" type="text/plain"></script>
          </div>
          <h2 class="sider-title">选择标签</h2>
          <div class="arrlist">
            <ul class="clearfix">
              <li v-for="item in tags" :class="{'focus':ifInChosen(item.id)}">
                <a @click="choseTag(item)">{{item.name}}{{item.show}}</a>
              </li>
            </ul>
          </div>
          <div class="check-btn">
            <input type="checkbox" v-model="type" id="male"/>
            <label for="male">作为操盘日记发布</label>
          </div>
          <p class="btn"><a @click="conformPublish">确认发布</a></p>
        </div>
      </div>
    </div>
    <bottom/>
  </div>
</template>

<script>
  import bottom from '@/components/Bottom'
  import newHeader from '@/components/NewHeader'
  import '../../static/UE/ueditor.config.js'
  import '../../static/UE/ueditor.all.min.js'
  import '../../static/UE/lang/zh-cn/zh-cn.js'
  import '../../static/UE/ueditor.parse.min.js'
  import {mapGetters} from 'vuex'

  export default {
    name: "publish",
    data() {
      return {
        content: '',
        title: '',
        type: false,
        tags: [],
        editor: null,
        chosenTags: []
      }
    }, components: {
      bottom,
      newHeader,
    }, mounted() {
      this.getTags()
      UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
      UE.Editor.prototype.getActionUrl = function (action) {
        if (action == 'uploadimage') {
          return 'http://175.6.6.55:8062/sophon-test/content/fileUpload';
        } else {
          return this._bkGetActionUrl.call(this, action);
        }
      }
      this.editor = UE.getEditor('deitor')
      this.$store.dispatch('updateHeadStatu', true)
    },
    destroyed() {
      this.editor.destroy();
    },
    methods: {
      ifInChosen(id) {
        for (var i = 0; i < this.chosenTags.length; i++) {
          if (this.chosenTags[i] == id) {
            return true;
          }
        }
        return false;
      },
      choseTag(item) {
        if (!this.ifInChosen(item.id)) {
          this.chosenTags.push(item.id)
        } else {
          var newTags = []
          for (var i = 0; i < this.chosenTags.length; i++) {
            if (this.chosenTags[i] != item.id) {
              newTags.push(this.chosenTags[i])
            }
          }
          this.chosenTags = newTags

        }
      },
      conformPublish() {
        if (this.editor.getContent() == '') {
          this.$message.error('请输入正文');
          return
        }
        if (this.title == '') {
          this.$message.error('请输入标题');
          return
        }
        if (this.chosenTags.length == 0) {
          this.$message.error('请请至少选择一个标签');
          return
        }

        // 去掉特殊字符
        var content = this.editor.getContent();
        this.$post('/content/contentPublish', {
          "content": this.editor.getContentTxt(),
          "contentLab": this.htmlEncode(content),
          "label": this.chosenTags,
          "title": this.title.replace(/[\'\"\\\/\b\f\n\r\t]/g, '').replace(/[\@\#\$\%\^\&\*\{\}\:\"\L\<\>\?]/),
          "type": this.type ? 2 : 1
        }).then(response => {
          this.$check(response)
          this.$message.success('文章发布成功成功');
          window.location.href = '/#/MySlef/'+this.userId

        })
      },
      htmlEncode(html) {
        //1.首先动态创建一个容器标签元素，如DIV
        var temp = document.createElement("div");
        //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
        (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
        //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
        var output = temp.innerHTML;
        temp = null;
        return output;
      },
      getTags() {
        this.$fetch('/indexNews/getBcHotTagList').then(response => {
          this.$check(response)
          this.tags = response.data
        })
      },
    },
    computed: {
      ...mapGetters({
        isLogin: 'isLogin',
        username: 'username',
        photo: 'photo',
        token: 'token',
        userId: 'userId',
        headerCss: 'headerCss'
      })
    }
  }
</script>

<style scoped>

</style>
